<template>
  <div class="block text-center">
    <el-carousel trigger="click" height="466px">
      <el-carousel-item v-for="item in bannerInfo" :key="item.id">
        <a :href="item.link" style="width: 100%; height: 100%;">
          <img :src="item.pcAdvertiseUrl" alt="" style="width: 100%; height: 100%;">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';

const props = defineProps(['bannerInfo']);

// onMounted(() => {
//   console.log(props.bannerInfo);
// })

</script>

<style lang="less">
.text-center {
  overflow: hidden;
}

.el-carousel {
  width: 100%;
  margin-top: 20px;
  border-radius: 4px;

  .el-carousel-item {
    background-color: aqua;
  }
}

.el-carousel__indicator--horizontal .el-carousel__button {
  width: 14px;
  height: 14px;
  // background: transparent;
  background-color: rgba(255, 255, 255, .6);
  border-radius: 50%;
  opacity: 0.5;
}

.el-carousel__indicator--horizontal.is-active .el-carousel__button {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 1;
}
</style>